<template>
  <div class="home">
    <img src="C:\Users\Admin\Downloads\HPV\1\1.jpg" alt="">
    <div class="head">
      <search v-model="keyword" @search="search" placeholder="搜索"></search>
    </div>
    <van-list class="list" v-model="loading" :finished="finished" finished-text="没有更多了">
      <div class="item">
        <div class="hd">
          <img class="img" src="@/assets/images/txxx.png" alt="" />
        </div>
        <div class="bd">
          <p class="name">提醒消息</p>
          <p class="text">您有一条新的消息待处理</p>
        </div>
        <p class="time">09:02</p>
      </div>
      <div class="item">
        <div class="hd">
          <img class="img" src="@/assets/images/xtxx.png" alt="" />
        </div>
        <div class="bd">
          <p class="name">系统消息</p>
          <p class="text">评价通知</p>
        </div>
        <p class="time">09:02</p>
      </div>
      <fragment v-for="item in List" :key="item.lastMessage.messageId">
        <div class="item" @click="
          jumpTo('im', {
            id:
              doctor_id == item.lastMessage.senderId
                ? item.lastMessage.payload.config.to.id
                : item.lastMessage.payload.config.from.id,
            name:
              doctor_id == item.lastMessage.senderId
                ? item.lastMessage.payload.config.to.name
                : item.lastMessage.payload.config.from.name,
            avatar:
              doctor_id == item.lastMessage.senderId
                ? item.lastMessage.payload.config.to.avatar
                : item.lastMessage.payload.config.from.avatar,
          })
          ">
          <div class="hd">
            <img class="img border" :src="doctor_id == item.lastMessage.senderId
                ? item.lastMessage.payload.config.to.avatar
                : item.lastMessage.payload.config.from.avatar
              " alt="" />
          </div>
          <div class="bd">
            <p class="name">
              {{
                doctor_id == item.lastMessage.senderId
                ? item.lastMessage.payload.config.to.name
                : item.lastMessage.payload.config.from.name
              }}
            </p>
            <p class="text">{{ item.lastMessage.payload.text }}</p>
          </div>
          <p class="time">
            {{ parseTime(item.lastMessage.timestamp) }}
          </p>
        </div>
      </fragment>
    </van-list>

    <IndexTabBar></IndexTabBar>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Search from "../user/components/Search.vue";
import IndexTabBar from "@/components/IndexTabBar.vue";
import { parseTime } from "@/utils/tools.js";
import mixin from "@/mixins/mixin.js";
import {
  getMessageListHistroy,
  getMessageNotice,
} from "@/request/api/message.js";
export default {
  components: {
    IndexTabBar,
    Search,
  },
  data() {
    return {
      keyword: "",
      loading: false,
      finished: false,
      List: [],
    };
  },

  computed: {
    ...mapState("user", ["doctor_id", "doctor_name", "avatar"]),
  },

  mounted() {
    this.connectGoEasy().then(() => {
      this.getList();
      this.goEasy.im.on(
        this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED,
        this.updateList
      );
    });
  },

  mixins: [mixin],

  destroyed() {
    this.goEasy.im.off(
      this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED,
      this.updateList
    );
  },

  methods: {
    ...mapActions("message", ["connectGoEasy"]),
    search() { },
    parseTime: parseTime,
    getList() {
      this.loading = true;
      this.goEasy.im.latestConversations({
        onSuccess: (res) => {
          console.log(res);
          if (res.content.conversations.length) {
            this.loading = false;
            this.finished = true;
            this.List = res.content.conversations;
          } else {
            this.getListHistroy();
          }
        },
        onFailed: function (error) {
          //获取失败
          this.loading = false;
          this.finished = true;
          console.log(
            "Failed to get the latest conversations, code:" +
            error.code +
            " content:" +
            error.content
          );
        },
      });
    },
    updateList(res) {
      this.List = res.conversations;
    },
    getListHistroy() {
      const params = {
        userB_id: this.doctor_id,
        appId: this.$store.state.appId,
        page: 0,
      };
      getMessageListHistroy(params)
        .then((res) => {
          this.loading = false;
          this.finished = true;
          const List = res.data.list;
          console.log(List);
          if (List.length) {
            List.map((v) => {
              v.lastMessage.payload = JSON.parse(v.lastMessage.payload);
            });
            this.List = List;
          } else {
            this.List = [];
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: PingFang SC-Medium, PingFang SC;

  .head {
    width: 375px;
    height: 56px;
    background: #ffffff;
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .list {
    padding-bottom: 10px;
  }

  .item {
    margin: 10px 15px 0 15px;
    width: 345px;
    height: 74px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #ffffff;
    display: flex;
    flex-direction: row;
    padding: 15px 0 0 15px;
    position: relative;

    .hd {
      height: 42px;
      width: 42px;

      .img {
        height: 42px;
        width: 42px;
        // border-radius: 50%;
      }

      .border {
        border-radius: 50%;
      }
    }

    .bd {
      display: flex;
      flex-direction: column;
      margin-left: 10px;

      .name {
        font-size: 15px;
        font-weight: 500;
        color: #333333;
        line-height: 18px;
      }

      .text {
        width: 263px;
        margin-top: 5px;
        font-size: 13px;
        font-weight: 400;
        color: #666666;
        line-height: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .time {
      position: absolute;
      top: 17px;
      right: 15px;
      font-size: 13px;
      font-weight: 400;
      color: #999999;
      line-height: 15px;
    }
  }
}
</style>
